<template>
  <div>
    <home-header :city="city"></home-header>
    <home-swiper :swiperList="swiperList"></home-swiper>
    <home-icons :iconList="iconList"></home-icons>
    <home-recommend :recommendList="recommendList"></home-recommend>
    <home-wekend :weekendList="weekendList"></home-wekend>
  </div>  
</template>
<script>
import HomeHeader from './components/Header'
import HomeSwiper from './components/Swiper'
import HomeIcons from './components/Icons'
import HomeRecommend from './components/Recommend'
import HomeWekend from './components/Weekend'
import axios from 'axios'
export default {
    name:'Home',
    components:{
        HomeHeader,
        HomeSwiper,
        HomeIcons,
        HomeRecommend,
        HomeWekend
    },
    data(){
      return{
          city:'',
          swiperList:[],
          iconList:[],
          recommendList:[],
          weekendList:[]
      }
    },
    mounted () {
      this.getHomeInfo()
    },
    methods: {
      getHomeInfo () {
        axios.get('/api/index.json').then(res =>{
          // console.log(res)
          this.getHomeInfoScc(res)
        })
      },
      getHomeInfoScc (res) {
        // console.log(res)
        res = res.data 
        if (res.ret && res.data){
          const data = res.data
          // console.log(data)
          this.city = data.city
          data.swiperList.forEach(item => {
            this.swiperList.push(item)
          })
          data.iconList.forEach(item => {
            this.iconList.push(item)
          })
          data.recommendList.forEach(item => {
            this.recommendList.push(item)
          })
          data.weekendList.forEach(item => {
            this.weekendList.push(item)
          })
          // console.log(this.iconList)
        }
      }
    }
}
</script>
<style scoped>

</style>
